<section class="ev-sm-container ev-view challenge-container">
    <div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view">
        <div class="row margin-bottom-cancel">
            <div class="col s12">
                <h5 class="w-300">Sponsors</h5>
            </div>
        </div>
        <div class="row">
            <div class="horizontal-scroll">
                <table ng-attr-id="sponsor_table" ng-class="['highlight', {'watermarked': challenge.showBackground}]">
                    <thead>
                        <tr>
                            <td data-field="rank">
                                <span class="w-300 fs-20">Name</span>
                            </td>
                            <td data-field="amount">
                                <span class="w-300 fs-20">Url</span>
                            </td>
                        </tr>
                    </thead>
                    <tbody class="fs-16 w-300">
                        <tr ng-repeat="sponsor in challenge.sponsors"
                            class="fs-16" id="prizerank-{{challenge.sponsor.name}}">
                            <td>{{sponsor.name}}</td>
                            <td>
                                <!-- Adding space between amount and currency letters -->
                                <span ui-sref="sponsor.website">{{ sponsor.website}}</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div >
                    <p class="fs-16 w-300">{{challenge.prizes.error.error}}</p>
                </div>
            </div>
        </div>
    </div>
</section>